<template>
  <div class="JJOp2">
    <JJTable :table-options="tableOptions" :table-data="tableData" />
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import JJTable from '../JJTable.vue'

export default defineComponent({
  name: 'JJOp2',
  components: { JJTable },
  data() {
    return {
      tableOptions: {
        rowOptionWidth: 160,
        column: {
          date: {
            label: 'Date',
            align: 'center',
            width: 120
          },
          name: {
            label: 'Name',
            align: 'center',
            width: '100%'
          },
          address: {
            label: 'Address',
            showTip: true
          }
        },
        options: {},
        searchOptions: {
          fruit: {
            type: 'input',
            label: 'Fruit',
            value: '',
            placeholder: 'Input fruit',
            width: 150,
            clearable: false
          }
        },
        dataOptions: {
          addRow: {
            label: 'Add row',
            icon: 'el-icon-circle-plus-outline',
            cb: () => {
              console.log('Add row...')
            }
          },
          delRow: {
            label: 'Delete selected',
            icon: 'el-icon-delete',
            cb: (rows) => {
              console.log('Delete selected rows: ')
              console.log(rows)
            }
          }
        },
        rowoptions: [
          {
            label: 'Edit',
            icon: 'el-icon-edit',
            cb: (idx, row) => {
              console.log('edit row idx: ' + idx, '\nrow data :', JSON.stringify(row, null, 2))
            }
          },
          {
            label: 'Delete',
            icon: 'el-icon-delete',
            confirmTitle: 'Are you sure?',
            cb: (idx, row) => {
              console.log('delete row idx: ' + idx, '\nrow data :', JSON.stringify(row, null, 2))
            }
          }
        ],
        pagination: {
          sizeChange: function (count) {
            console.log('Page size changed, pre page: ' + count)
          },
          currentPageChange: function (currentPage) {
            console.log('Current page is: ' + currentPage)
          },
          pageSize: 4,
          currentPage: 1
        }
      },
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ]
    }
  }
})
</script>

<style lang="scss"></style>
